<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="common-layout">
    <HeadContent title="审批休假"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="sizeSpace">
          <div style="margin-left: 5vh;">

            <el-button type="primary" @click="dialogFormVisible = true">
              <el-icon>
                <EditPen />
              </el-icon>&nbsp;批量修改日程安排
            </el-button>

            <el-button type="warning" @click="nextYear">
              <el-icon>
                <Plus />
              </el-icon>&nbsp;生成第二年默认工作日历
            </el-button>
            
            <el-button type="danger" @click="reback">
              <el-icon>
                <RefreshRight />
              </el-icon>&nbsp;恢复默认工作日历
            </el-button>

            <!-- 弹出框 -->
            <el-dialog v-model="dialogFormVisible" title="批量修改日程安排" width="500">
              <el-form :model="form">
                <div class="block">
                  <span class="demonstration">日期</span>
                  <el-date-picker v-model="value1" type="daterange" range-separator="To" start-placeholder="起始日期"
                    end-placeholder="结束日期"  />
                </div>

                <el-form-item label="Zones" >
                  <el-select v-model="form.region" placeholder="修改日期类型">
                    <el-option label="工作日" value="shanghai" />
                    <el-option label="休息日" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">
                    确认
                  </el-button>
                </div>
              </template>
            </el-dialog>
          </div>

          <el-card style="width: 150vh" shadow="hover">
            <el-calendar ref="calendar">
              <template #header="{ date }">
                <span>Custom header content</span>
                <span>{{ date }}</span>
                <el-button-group>
                  <el-button size="small" @click="selectDate('prev-year')">
                    上一年
                  </el-button>
                  <el-button size="small" @click="selectDate('prev-month')">
                    上个月
                  </el-button>
                  <el-button size="small" @click="selectDate('today')">今天</el-button>
                  <el-button size="small" @click="selectDate('next-month')">
                    下个月
                  </el-button>
                  <el-button size="small" @click="selectDate('next-year')">
                    下一年
                  </el-button>
                </el-button-group>
              </template>
            </el-calendar>
          </el-card>

          <!-- 提交 -->
          <el-button plain @click="open" style="background-color: #79BBFF;">提交</el-button>
        </el-space>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  Plus, RefreshRight, EditPen
} from '@element-plus/icons-vue'
import HeadContent from '@/components/HeadContent.vue'
// const flag = ref<boolean>(true)
import TagComtent from '@/components/TagComtent.vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

//提交按钮确认
const open = () => {
  ElMessageBox.confirm(
    '是否提交工作日历?',
    'Tips',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'primary',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}


const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

const dialogFormVisible = ref(false)

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const sizeSpace = ref(40)

//日历弹出框1

const value1 = ref('')

//日历弹出框2
const nextYear = () => {
  ElMessageBox.confirm(
    '是否为正式表及暂定表生成明年默认(双休制)工作表?',
    'Tips',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'primary',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

//日历弹出框3
const reback = () => {
  ElMessageBox.confirm(
    '是否恢复默认(双休制)状态？该操作不会改变正式表数据',
    'Tips',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'primary',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}


</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
}
.block{
  margin: 10px 0 20px 0;
}
.demonstration{
  margin-right: 21px;
}
.el-card {
  overflow: hidden; /* 隐藏水平滚动条 */
}
</style>
